<script setup lang="ts">
	import { ref } from 'vue'
	import dialogCloseBtn from '@/static/coupon-dialog-close.png';

	defineProps<{
		gifts : Array,
		ishidebtn : Boolean
	}>()

	const emit = defineEmits(['close'])

	function onClose() {
		emit('close')
	}
	function rediectpackage() {
		onConfirm()
		uni.navigateTo({
			url: '/pages/package/Cindex'
		})
	}
	function onConfirm() {
		emit('close')
	}
</script>

<template>
	<view class="gifts-dialog-content">
		<image class="close-btn" :src="dialogCloseBtn" mode="aspectFit" v-on:click="onClose" />

		<image class="bg" src="https://dongke-common.oss-cn-shenzhen.aliyuncs.com/garage-kit/gift-dialog-bg.png"
			mode="widthFix" />

		<view v-if="gifts.length === 1" class="gifts-wrapper">
			<view class="gifts-image-wrapper" :class="[ishidebtn?'gifts-image-wrapper1':'']">
				<text class="gifts-type" v-if="!ishidebtn">{{ gifts[0].type }}</text>
				<image :src="gifts[0].image" v-if="!ishidebtn" mode="aspectFit" class="gift-img" />
				<image :src="gifts[0].image" v-else mode="aspectFit" class="gift-img1" />
				<text class="gifts-name">{{ gifts[0].name }}</text>
			</view>
		</view>

		<view v-if="gifts.length >1" class="gifts-wrapper gifts-list">
			<view v-for="(gift, index) in gifts" :key="index" class="gifts-image-wrapper list-mode">
				<text class="gifts-type">{{ gift.type }}</text>
				<image :src="gift.image" mode="aspectFit" class="gift-img" />
				<text class="gifts-name">{{ gift.name }}</text>
			</view>
		</view>

		<view class="btns" v-if="!ishidebtn">
			<view class="gifts-cancel-btn" v-on:click="rediectpackage" />
			<view class="gifts-confirm-btn" v-on:click="onConfirm" />
		</view>
	</view>
</template>

<style>
	page {
		--dialog-background-color: transparent;
	}
</style>

<style scoped>
	.gifts-dialog-content {
		width: 100%;
		position: relative;
		box-sizing: border-box;
		padding-top: 65px;
		position: relative;
	}

	.gifts-dialog-content .bg {
		position: absolute;
		top: 0;
		width: 100%;
		z-index: -1;
	}

	.gifts-dialog-content .close-btn {
		position: absolute;
		top: 15px;
		right: 10px;
		width: 20px;
		height: 20px;
	}

	.gift-img {
		width: 274px;
		height: 274px;
	}
	.gift-img1 {
		width: 230px !important;
		height: 230px !important;
		border-radius: 10rpx !important;
	}
	.gifts-image-wrapper {
		width: 100%;
		aspect-ratio: 1/1;
		border-radius: 12px;
		position: relative;
	}
	.gifts-image-wrapper1{
		 display: flex;
		 justify-content: center;
		 align-items: center;
		 flex-direction: column;
	 }
	.gifts-image-wrapper.list-mode {
		margin-bottom: 1em;
	}

	.gifts-image-wrapper.list-mode .gift-img {
		width: 100%;
		height: 100%;
		border-radius: 12px;
	}

	.gifts-type {
		width: 100%;
		top: 0;
		z-index: 200;
		height: 24px;
		background-color: rgba(0, 0, 0, 0.7);
		text-align: center;
		position: absolute;
		display: inline-block;
		line-height: 24px;
		padding: 0 0.5em;
		box-sizing: border-box;
		color: white;
		font-size: 12px;
		border-radius: 6px;
		text-overflow: ellipsis;
		width: 100%;
		overflow: hidden;
		white-space: nowrap;
	}

	.gifts-name {
		width: 100%;
		height: 27px;
		text-align: center;
		display: inline-block;
		line-height: 27px;
		padding: 0 0.5em;
		box-sizing: border-box;
		background-color: #000000;
		color: white;
		font-size: 12px;
		border-radius: 6px;
		margin-top: 6px;
		text-overflow: ellipsis;
		width: 100%;
		overflow: hidden;
		white-space: nowrap;
	}

	.gifts-wrapper {
		width: 100%;
		display: flex;
		height: auto;
		flex-direction: column;
		align-items: center;
		padding: 0 18px;
		box-sizing: border-box;
	}

	.gifts-list {
		display: flex;
		flex-flow: row wrap;
		gap: 10px;
		height: 300px;
		overflow-y: auto;
	}

	.gifts-list .list-mode {
		width: calc((100% - 20px) / 3);
	}

	.gifts-promo-title {
		width: 196px;
		margin: 0 auto 10px;
		display: block;
	}

	.btns {
		display: flex;
		justify-content: space-around;
		margin-top: 20px;
	}

	.gifts-cancel-btn {
		background-image: url('~@/static/gifts-cancel-btn.png');
		background-size: cover;
		background-repeat: no-repeat;
		width: 130px;
		height: 44px;
		margin: 26px auto 0;
	}

	.gifts-confirm-btn {
		background-image: url('~@/static/gifts-confirm-btn.png');
		background-size: cover;
		background-repeat: no-repeat;
		width: 130px;
		height: 44px;
		margin: 26px auto 0;
	}
</style>